<template>
	<!--重点企业画像功能-->
	<div class="corporate-portrait">
		<div class="topBox">
			<div class="tabList">
				<li>
					<div style="width:10%" class="titles topborder">企业亮点：</div>
					<div style="width:90%" class="topborder rightBorder">
						<span v-for="(item,index) in defaultInfo.qyldarr" :key="index" :style="{background:'rgba('+ldColor[index]+',.4'+')',color:'rgba('+ldColor[index]+',1'+')','border-color':'rgba('+ldColor[index]+',.7'+')'}">{{item}}</span>
					</div>
				</li>
				<li>
					<div style="width:10%" class="titles">法定代表人：</div>
					<div style="width:23.333%">{{defaultInfo.fddbr}}</div>
					<div style="width:10%" class="titles">注册资本：</div>
					<div style="width:23.333%">{{defaultInfo.zczb}}</div>
					<div style="width:10%" class="titles">人员规模：</div>
					<div style="width:23.333%" class="rightBorder">{{defaultInfo.rygm}}</div>
				</li>
				<li>
					<div style="width:10%" class="titles">成立时间：</div>
					<div style="width:23.333%">{{defaultInfo.clsj}}</div>
					<div style="width:10%" class="titles">企业简称：</div>
					<div style="width:23.333%">{{defaultInfo.qyjc}}</div>
					<div style="width:10%" class="titles">组织机构代码：</div>
					<div style="width:23.333%" class="rightBorder">{{defaultInfo.zzjgdm}}</div>
				</li>
				<li>
					<div style="width:10%" class="titles">企业状态：</div>
					<div style="width:23.333%">{{defaultInfo.qyzt}}</div>
					<div style="width:10%" class="titles">官网：</div>
					<div style="width:23.333%"><a :href="'http://'+defaultInfo.website" target="_blank">{{defaultInfo.website}}</a></div>
					<div style="width:10%" class="titles">公司行业：</div>
					<div style="width:23.333%" class="rightBorder">{{defaultInfo.industry}}</div>
				</li>
				<li>
					<div style="width:10%" class="titles">联系方式：</div>
					<div style="width:23.333%">{{defaultInfo.lxfs}}</div>
					<div style="width:10%" class="titles">联系邮箱：</div>
					<div style="width:56.666%" class="rightBorder">{{defaultInfo.email}}</div>
				</li>
				<li>
					<div style="width:10%" class="titles">注册地址：</div>
					<div style="width:90%;" class="rightBorder manyText">
						{{defaultInfo.zcdz}}
					</div>
				</li>
				<li style="height:15vh">
					<div style="width:10%" class="titles">经营范围：</div>
					<div style="width:90%;;overflow-y: auto;line-height: 3vh;padding:1vh 1vw;box-sizing: border-box;" class="rightBorder manyText">
						{{defaultInfo.busi_scope}}
					</div>
				</li>
				<li style="height:11vh">
					<div style="width:10%" class="titles">企业主要介绍：</div>
					<div style="width:90%;;overflow-y: auto;;line-height: 3vh;padding:1vh 1vw;box-sizing: border-box;" class="rightBorder manyText">
						{{defaultInfo.qyzyjs}}
					</div>
				</li>
			</div>
		</div>
		<div class="tabSwicthbox">
			<li v-for="(item,index) in tabListText" :key="index" :class="{active:tabListIndex==index}" @click="tabClick(item,index)"><span>{{item.name}}</span></li>
		</div>
		<div class="bottomBox">
			<table-block :oprData="oprData" :pageSize="pageSize" :total="total" @currentChange="currentChange" :currePage="currePage"></table-block>
		</div>
	</div>
</template>

<script>
import {getportraitData,getportraitData1} from '@/api/pages.js'
export default {
	name: "corporate-portrait",
	components: {
		TableBlock:()=>import('@/components/table-block'),
	},
	props: {},
	data() {
		return {
			tabListText:[
        {name:'变更信息',id:'P035'},
        {name:'法定代表人',id:'P039'},
        {name:'股东名录',id:'P038'},
        {name:'分支公司',id:'P036'},
        {name:'管理人员信息',id:'P037'},
			],
			ldColor:['222,62,62','10,188,243','248,219,23','0,255,0'],//取rgb的前三位R,G,B值,A值动态配置
			companyId:this.$route.query.companyId||1,
			defaultInfo:{},
			tabListIndex:0,
			pageSize:8,
			total:0,
			oprData:{},
			currePage:1,
			companyType:'P035'
		}
	},
	computed: {},
	created() {
	},
	mounted() {
		this.getportraitData('C030',this.companyId)
		this.getportraitData1(this.companyType,this.companyId,1,this.pageSize)
	},
	methods: {
		tabClick(item,index){
			this.tabListIndex=index
			this.companyType=item.id
			this.currePage=1
			this.getportraitData1(this.companyType,this.companyId,1,this.pageSize)
		},
		// 分页
		currentChange(e){
			this.currePage=e
			this.getportraitData1(this.companyType,this.companyId,e,this.pageSize)
		},
		// 基本信息
		getportraitData(busiCode,qyId){
			getportraitData(busiCode,qyId).then(res=>{
				if(res.data.code==200){
					if(res.data.data.list[0].qyld.length>0){
						res.data.data.list[0].qyldarr = res.data.data.list[0].qyld.split(',')
					}else{
						res.data.data.list[0].qyldarr=[]
					}
					this.defaultInfo=res.data.data.list[0]
				}
			}).catch(err=>{

			})
		},
		// 列表信息
		getportraitData1(busiCode,qyId,current,size){
			getportraitData1(busiCode,qyId,current,size).then(res=>{
				if(res.data.code==200){
					this.oprData={}
					this.oprData.tableData=res.data.data.tableData
					this.oprData.list=res.data.data.list.records
					this.total=res.data.data.list.total
				}
			}).catch(err=>{

			})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.corporate-portrait {
	width:100%;
	height:auto;
	overflow: hidden;
	.topBox{
		width:100%;
		height:50vh;
		.tabList{
			width:100%;
			height:100%;
			background: rgba(255, 255, 255, 0);
			li{
				list-style: none;
				height:4vh;
				div{
					width:50%;
					height:100%;
					color:#fff;
					float: left;
					border:1px solid #00BAD8;
					padding:0 1vw;
					// font-family: Microsoft YaHei;
					font-weight: bold;
					font-size: 0.88vw;
					border-top:none;
					border-right:none;
					line-height: 3.9vh;
					span{
						padding:0.05vh .4vw;
						font-size:0.78vw;
						border-radius: 4px;
						border:0.05vw solid;
						margin-right:1vw
					}
					a{
						color:#0CFCFF;
					}
				}
				div.topborder{
					border-top:1px solid #0CFCFF;
				}
				div.rightBorder{
					border-right:1px solid #0CFCFF;
				}
				div.manyText{
					line-height: 20px;
				}
				div.titles{
					color:#0CFCFF;
				}
			}
		}
	}
	.tabSwicthbox{
		width:100%;
		height:4.5vh;
		margin-bottom:1vh;
		background-image: linear-gradient(to right, rgba(3, 66, 123, .2),rgba(3, 66, 123, .1), rgba(3, 66, 123, 0));
		padding:0 2vh;
		display: flex;
		margin-top:2vh;
		li{
			flex: 1;
			height: 100%;
			list-style: none;
			transform:skew(-45deg);
			background-color: #009BB4;
			float: left;
			margin-right:.2vw;
			border:.5px solid #0CFCFF;
			span{
				display: block;
				line-height: 4.2vh;
				color:#fff;
				text-align: center;
				transform:skew(45deg);
				font-size: 0.95vw;
				font-weight: bold;
				cursor: pointer;
			}
		}
		li.active{
			background-color: #068C91;
			span{
				color:#fff
			}
		}
	}
	.bottomBox{
		width:100%;
		height:45vh;
		// margin-top:4vh;
		overflow-y: auto;
		// padding-bottom:6vh;

	}
}
	// background-color: #068C91;
	// border:.5px solid #0CFCFF;
</style>
